<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<script src="https://cdn.bootcss.com/socket.io/2.1.1/socket.io.js"></script>

<body>

<textarea type="text" placeholder="message" id="textbox">
    {"data":"1qqq","room":"test"}
</textarea>
<button id="button">Send</button>
<div id="box"></div>

<script>

    var socket = io('ws://localhost:5000',
            {"transports": ['websocket', 'polling']}
    );
    socket.on('connect', function () {
        socket.emit('join', {"user": "1", "room": "test", "action": "login", "data": ""})
    });
    socket.on('doaction', function (data) {
        var box = document.createElement("div");
        box.innerHTML = JSON.stringify(data) + ' doaction';
        document.getElementById("box").appendChild(box);
    });

    socket.on('dojoin', function (data) {
        var box = document.createElement("div");
        box.innerHTML = JSON.stringify(data) + ' dojoin';
        document.getElementById("box").appendChild(box);
    });

    socket.on('doleave', function (data) {
        var box = document.createElement("div");
        box.innerHTML = JSON.stringify(data) + ' doleave';
        document.getElementById("box").appendChild(box);
    });

    socket.on('disconnect', function () {

    });

    window.onbeforeunload = function (event) {
        socket.emit('leave', {"user": "1", "room": "test", "action": "login", "data": ""})

        socket.close();
    }

    button.addEventListener("click", function (event) {
        var text = document.getElementById("textbox").value;
        socket.emit('action', JSON.parse(text));
    });

</script>
</body>
</html>

